<script src="<?php echo base_url();?>assets/js/highcharts.js" type="text/javascript"></script>
<script>
var chart;
$(document).ready(function() {
  chart = new Highcharts.Chart({
    chart: {
      renderTo: 'chartdiv',
      type: 'spline',
      marginBottom: 50,
      backgroundColor: null
    },
    credits: {
      enabled: false
    },
    title: {
      text: '<?php echo lang("points_progression");?>',
      x: -20 //center
    },
    xAxis: {
      categories: <?php echo $x_categories;?>,
      min: 0,
      startOnTick: true,
      title: {
        text: '<?php echo lang("stage");?>'
      }
    },
    yAxis: {
      title: {
        text: '<?php echo lang("points");?>'
      },
      min: 0,
      allowDecimals: false,
      plotLines: [{
        value: 0,
        width: 1,
        color: '#808080'
      }]
    },
    tooltip: {
      formatter: function() {
          return '<b>'+ this.series.name +'</b><br/>'+
          this.x +': '+ this.y +'°C';
      }
    },
    legend: {
      layout: 'vertical',
      align: 'left',
      floating: true,
      verticalAlign: 'top',
      x: 50,
      y: 100,
      borderWidth: 0
    },
    plotOptions: {
      spline: {
        marker: {
          enabled: false
        }
      },
      series: {
        animation: {
          duration: 3000
        }
      }
    },
    series: [<?php echo $series_string;?>]
  });
});
</script>
  <div class='row'>
    <div class='span5'>
      <div class='panel'> 
        <table class='table table-condensed'>
          <thead>
            <tr>
              <th>Pos</th>
              <th><?php echo lang('user_team');?> </th>
              <th class='centertext'><a href="#" rel="tooltip" title="<?php echo lang('stage_results');?>"><img src="<?php echo base_url();?>assets/images/jersey_stage.gif" /></a></th>
              <th class='centertext'><a href="#" rel="tooltip" title="<?php echo lang('overall_standing');?>"><img src="<?php echo base_url();?>assets/images/jersey_yellow.gif" /></a></th>
              <th class='centertext'><a href="#" rel="tooltip" title="<?php echo lang('points_standing');?>"><img src="<?php echo base_url();?>assets/images/jersey_green.gif" /></a></th>
              <th class='centertext'><a href="#" rel="tooltip" title="<?php echo lang('mountain_standing');?>"><img src="<?php echo base_url();?>assets/images/jersey_mountain.gif" /></a></th>
              <th class='centertext'><?php echo lang('total');?></th>
            </tr>
          </thead>
          <tbody>
      <?php
      $r = 0;
      $real_count = 0;
      $old = 0;
      foreach($overall_ranking as $rank)
      {
        $real_count++;
        if($rank->points_overall != $old)
        {
          $r = $real_count;
        }
        else
        {
           
        }
      ?>
            <tr>
              <td class='centertext'><?php echo $r;?></td>
              <td><?php echo anchor('info/user_teams/'.$rank->id, $rank->username);?></td>
              <td class='centertext'><?php echo $rank->points_stage;?></td>
              <td class='centertext'><?php echo $rank->points_yellow;?></td>
              <td class='centertext'><?php echo $rank->points_green;?></td>
              <td class='centertext'><?php echo $rank->points_mountain;?></td>
              <td class='centertext'><?php echo $rank->points_overall;?></td>
            </tr>
      <?php
        $old = $rank->points_overall;
      }
      ?> 
          </tbody>
        </table>

      </div>
    </div>
    <div class='span7'>
      <div class='panel'>
        <div id='chartdiv'></div>

      </div>
    </div>
  </div>
